<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>系统角色</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div slot="header">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="角色名称">
                        <el-input placeholder="请输入角色名称" v-model="rolename"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="searchRole">查询</el-button>
                        <el-button @click="clearRole">清空筛选条件</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-row style="margin-bottom: 10px;">
                <el-button type="primary" @click="formTable = true">新增</el-button>
            </el-row>

            <el-table border style="width: 100%" :data="tableData">
                <el-table-column prop="rolename" label="角色名称">
                </el-table-column>
                <el-table-column prop="rolecode" label="角色编码">
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间">
                </el-table-column>
                <el-table-column prop="" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="gotoRole(scope.row.id)">用户</el-button>
                        <el-button size="mini" type="text" @click="gotoshowAuditPage(scope.row.id)">授权</el-button>
                        <el-button size="mini" icon="el-icon-edit" circle @click="showRolesById(scope.row.id)"></el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" circle
                            @click="deleteSystemRole(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- @current-change="getSystemUsersList"
      @size-change="getSystemUsersList" -->
            <el-pagination style="text-align:center;margin-top: 20px;" :current-page.sync="pageInfo.pageNum"
                :page-sizes="[2, 3, 5, 10]" :page-size.sync="pageInfo.pageSize"
                layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total" :pager-count="7"
                @current-change="getRoleList" @size-change="getRoleList">
            </el-pagination>
        </el-card>

        <el-dialog title="新增角色" :visible.sync="formTable">
            <AddRole @getRoleList="getRoleList" @close="close"></AddRole>
        </el-dialog>

        <!-- //用户窗口 -->
        <el-dialog title="用户" :visible.sync="userDialogVisible">
            <showRole v-if="userDialogVisible" :id="selectedRoleId"></showRole>

        </el-dialog>
        <!-- 授权窗口 -->
        <el-dialog title="授权" :visible.sync="AuthorizationVisible">
            <Authorization @close="close" :id="selectedRoleId"></Authorization>
        </el-dialog>
        <!-- 编辑窗口 -->
        <el-dialog title="编辑" :visible.sync="reqRolesByIdVisible">
            <reqRolesById @close="close" v-if="reqRolesByIdVisible" :id="selectedRoleId"></reqRolesById>
        </el-dialog>
    </div>
</template>

<script>
import AddRole from './AddRole.vue';
import showRole from './showRole.vue';
import Authorization from './Authorization.vue';
import reqRolesById from './reqRolesById.vue'
export default {
    name: 'SystemRole',
    components: {
        AddRole,
        showRole,
        Authorization,
        reqRolesById
    },
    data() {
        return {
            formTable: false,
            pageInfo: {
                pageNum: 1,
                pageSize: 3,
                total: 20,
            },
            tableData: [],
            RoletableData: [],
            rolename: "",
            id: "",
            userDialogVisible: false,
            AuthorizationVisible: false,
            reqRolesByIdVisible: false,
            selectedRoleId: "",

        }
    },
    mounted() {
        this.getRoleList()
    },
    methods: {
        close() {
            this.AuthorizationVisible = false
            this.formTable = false
            this.reqRolesByIdVisible = false
        },
        async getRoleList() {
            let { pageNum, pageSize } = this.pageInfo;
            let res = await this.$API.SystemMenus.reqSystemRoleList(pageNum, pageSize, this.rolename)
            if (res.code == 200) {
                this.pageInfo.total = res.data.total;
                this.tableData = res.data.list;
                
            } else {
                this.tableData = [];
                this.pageInfo.total = 0;
                this.pageInfo.pageNum = 1;
                this.$message({ message: '没有数据', type: 'error' })
            }
        },
        async searchRole() {
            this.pageInfo.pageNum = 1; // 重置页码为1
            await this.getRoleList();
        },
        clearRole() {
            this.rolename = '',
                this.pageInfo.pageNum = 1; // 重置页码为1
            this.getRoleList();
        },
        gotoRole(id) {
            this.userDialogVisible = true;
            this.selectedRoleId = id;
        },
        gotoshowAuditPage(id) {
            this.AuthorizationVisible = true;
            this.selectedRoleId = id;

        },
        showRolesById(id) {
            this.reqRolesByIdVisible = true
            this.selectedRoleId = id;
        },
        deleteSystemRole(id) {
            this.deleteRole(id);
        },
        async deleteRole(id) {
            this.$confirm('确定删除该用户吗？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$API.SystemMenus.deleteSystemRole(id)
                if (res.code == 200) {
                    this.pageInfo.pageNum = 1;
                    
                    this.getRoleList();
                    this.$message({ message: '删除成功', type: 'success' })
                } else {
                    this.$message({ message: '删除失败', type: 'error' })
                }
            }).catch(() => {
                this.$message({ type: 'info', message: '已取消删除' });
            });
        }

    }

};
</script>

<style scoped></style>
